<template>
  <div class="box">
    <el-form :model="form" ref="FormInstance">
      <el-form-item label="品牌名称:" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="品牌首字母:" prop="firstLetter">
        <el-input v-model="form.firstLetter"></el-input>
      </el-form-item>
      <el-form-item label="品牌LOGO:" prop="logo">
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :auto-upload="false"
        >
          <template #trigger>
            <el-button type="primary">上传文件</el-button>
            <div style="font-size: 10px; color: #ccc; margin-left: 10px">
              只能上传jpg/png文件，且不超过100kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="品牌专区大图:" prop="bigPic">
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :auto-upload="false"
        >
          <template #trigger>
            <el-button type="primary">上传文件</el-button>
            <div style="font-size: 10px; color: #ccc; margin-left: 10px">
              只能上传jpg/png文件，且不超过100kb
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="品牌故事:" prop="brandStory">
        <el-input type="textarea" v-model="form.brandStory"></el-input>
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input v-model="form.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否显示:" prop="showStatus">
        <el-radio-group v-model="form.showStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="品牌制造商:" prop="factoryStatus">
        <el-radio-group v-model="form.factoryStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <div style="margin-left: 100px">
        <el-button type="primary" @click="submitFn">提交</el-button>
        <el-button @click="resetFn">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { user } from "@/api";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";

interface IState {
  form: ICreateBrandParams;
}
const formRef = ref<FormInstance>();
const state = reactive<IState>({
  form: {
    bigPic: "",
    brandStory: "",
    factoryStatus: 0,
    firstLetter: "",
    logo: "",
    name: "",
    showStatus: 0,
    sort: 0,
  },
});
const { form } = toRefs(state);

const submitFn = () => {
  ElMessageBox.confirm("确定要添加吗?")
    .then(() => {
      user.createBrandApi(form.value).then((res) => {
        ElMessage({
          message: res.message,
          type: res.code === 200 ? "success" : "error",
        });
      });
    })
    .catch(() => {});
};
const router = useRouter();
const resetFn = () => {
  formRef.value?.resetFields();
  router.go(0);
};
</script>

<style lang="less" scoped>
.box {
  width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
}
:deep(.el-form-item__label) {
  width: 100px;
}
</style>
